<template>
  <view class="su-card">
    <view class="su-card__header">
      <view class="su-card__header-title"><slot name="title"></slot></view>
      <view class="su-card__header-desc"><slot name="desc"></slot></view>
    </view>
    <view class="su-card__content">
      <slot name="content"></slot>
    </view>
    <view class="su-card__footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup>
defineOptions({
  name: 'SuCard'
});
</script>

<style lang="scss">
.su-card {
  @include wh(100%);
  &__header {
    @include wh(100%, 40px, 40px);
    padding: 0 10px;
    @include flex(row nowrap, space-between, center);
    &-title {
      flex: 1;
      @include flex(row nowrap, flex-start, center, 6px);
    }
    &-desc {
      flex: 1;
      @include flex(row nowrap, flex-end, center, 6px);
    }
  }
  &__content {
    padding: 10px;
  }
  &__footer {
    @include flex(row nowrap, null, center);
    padding: 0 10px;
  }
}
</style>
